<template>
  <div class="text-white p-[10px] pt-[10px] w-[420px] bg-[#222] overflow-hidden">
    <div class="flex justify-between mb-[20px]">
      <span>哈哈哈哈</span>
      <span>2021-01-01 14:22:11</span>
    </div>
    <!-- 内容 -->
    <div class="overflow-x-auto w-[400px]">
      <!-- 标题 -->
      <div class="flex gap-x-[10px] border-b-[1px] border-[#444] pb-[10px]">
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">AIR</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C2F6</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">C3F8</span>
      </div>
      <!-- 标题对应的值 -->
      <div class="flex gap-x-[10px] border-b-[1px] border-[#444] py-[10px]">
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">11</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">22</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
        <span class="inline-block flex-shrink-0 w-[50px] overflow-hidden text-ellipsis">333</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>
